import React, { useState } from 'react';
import Header from '@/components/Header';
import { getBanner } from '@/api/home';
import { useEffect } from 'react';
// 导入轮播图组件
import Myswiper from '@/components/Myswiper';
// 导入 导航菜单组件
import Navlist from '@/components/Navlist'
// 导入 产品列表组件
import Prolist from '@/components/Prolist'
// 导入类型的声明文件
import { proItem } from '@/types/home'
import { sleep } from 'antd-mobile/es/utils/sleep';

import { PullToRefresh, InfiniteScroll, DotLoading } from 'antd-mobile'
// 导入首页的css 样式
import '@/assets/css/home.scss';
// 导入数据请求
import { getProlist } from '@/api/home';
type Props = {};

export default function Home({ }: Props) {
    const [swiperArr, setSwiperArr] = useState<Array<{ img: string }>>([]);
    useEffect(() => {
        getBanner(null).then(res => {
            // console.log('res', res);
            setSwiperArr(res.data.data)
        })
    }, []);

    // 下拉刷新代码
    const [hasMore, setHasMore] = useState(true);
    // 定义分页页数 第几页
    const [count, setCount] = useState<number>(1);
    // 定义 产品列表数据
    const [prolist, setprolist] = useState<Array<proItem>>([]);

    async function loadMore() {
        // 设置count 页数的值
        setCount(count + 1);  // 这个是异步代码, 该count 的结果是下一次请求的count
        // console.log('loadMore-count', count);  // 2
        const append = await getProlist({ count: count });

        if (append.data.data) {
            // 有data,表示有数据
            setprolist(val => [...prolist, ...append.data.data])
            setHasMore(true)
        } else {
            setHasMore(false)
        }
    }
    const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
        return (
            <>
                {hasMore ? (
                    <>
                        <span>Loading</span>
                        <DotLoading />
                    </>
                ) : (
                    <span>--- 我是有底线的逗你玩 ---</span>
                )}
            </>
        )
    }
    return (
        <div className='home'>
            {/* 头部组件 */}
            <Header></Header>
            {/* 注意: 下拉刷新 需要包裹整个页面部分 */}
            <PullToRefresh
                onRefresh={async () => {
                    await sleep(1000);
                    // setData([...getNextData(), ...data])
                    // 重新请求数据
                    console.log('下拉刷新');
                    getProlist({ count: 1 }).then(res => {
                        setprolist([...res.data.data])
                        // 重新修改页码
                        setCount(2)
                    })
                }}
            >
                {/* 轮播图组件 */}
                {swiperArr.length > 0 ? <Myswiper swiperArr={swiperArr}></Myswiper> : <></>}
                {/* 导航菜单组件 */}
                <Navlist></Navlist>
                {/*产品列表组件 */}
                <Prolist prolist={prolist}></Prolist>
            </PullToRefresh>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                <InfiniteScrollContent hasMore={hasMore} />
            </InfiniteScroll>
        </div>
    )

}